<!--Specify page [ SAMPLE ]-->
<script src="#(ctx)/common/js/demo/dashboard.js"></script>
                <!--Page Title-->
                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                <div id="page-title">
                    <h1 class="page-header text-overflow">工作台</h1>

                    <!--Searchbox-->
                    <div class="searchbox">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="搜索..">
                            <span class="input-group-btn">
                                <button class="text-muted" type="button"><i class="demo-pli-magnifi-glass"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                <!--End page title-->

                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    
					<div class="row">
					    <div class="col-lg-7">
					
					        <!--Network Line Chart-->
					        <!--===================================================-->
					        <div id="demo-panel-network" class="panel">
					            <div class="panel-heading">
					                <div class="panel-control">
					                    <button id="demo-panel-network-refresh" data-toggle="panel-overlay" data-target="#demo-panel-network" class="btn"><i class="demo-pli-repeat-2 icon-lg"></i></button>
					                    <div class="btn-group">
					                        <button class="dropdown-toggle btn" data-toggle="dropdown" aria-expanded="false"><i class="demo-pli-gear icon-lg"></i></button>
					                        <ul class="dropdown-menu dropdown-menu-right">
					                            <li><a href="#">链接</a></li>
					                            <li><a href="#">我要怎么办</a></li>
					                            <li><a href="#">有些事情要做</a></li>
					                            <li class="divider"></li>
					                            <li><a href="#">办理</a></li>
					                        </ul>
					                    </div>
					                </div>
					                <h3 class="panel-title">网站流量</h3>
					            </div>
					
					            <!--Morris line chart placeholder-->
					            <div id="morris-chart-network" class="morris-full-content"></div>
					
					            <!--Chart information-->
					            <div class="panel-body">
					                <div class="row pad-top">
					                    <div class="col-lg-8">
					                        <div class="media">
					                            <div class="media-left">
					                                <div class="media">
					                                    <p class="text-semibold text-main">气温</p>
					                                    <div class="media-left pad-no">
					                                        <span class="text-2x text-semibold text-nowrap text-main">
					                                            <i class="demo-pli-temperature"></i> 43.7
					                                        </span>
					                                    </div>
					                                    <div class="media-body">
					                                        <p class="mar-no">°C</p>
					                                    </div>
					                                </div>
					                            </div>
					                            <div class="media-body pad-lft">
					                                <div class="pad-btm">
					                                    <p class="text-semibold text-main mar-no">今日访问数量</p>
					                                    <small>一些情况要发生了,一些情况要发生了,一些情况要发生了,一些情况要发生了,一些情况要发生了,一些情况要发生了,一些情况要发生了一些情况要发生了,一些情况要发生了,一些情况要发生了.</small>
					                                </div>
					                            </div>
					                        </div>
					                    </div>
					
					                    <div class="col-lg-4">
					                        <p class="text-semibold text-main">带宽使用</p>
					                        <ul class="list-unstyled">
					                            <li>
					                                <div class="media">
					                                    <div class="media-left">
					                                        <span class="text-2x text-semibold text-main">75.9</span>
					                                    </div>
					                                    <div class="media-body">
					                                        <p class="mar-no">Mbps</p>
					                                    </div>
					                                </div>
					                            </li>
					                            <li>
					                                <div class="clearfix">
					                                    <p class="pull-left mar-no">已使用</p>
					                                    <p class="pull-right mar-no">75%</p>
					                                </div>
					                                <div class="progress progress-xs">
					                                    <div class="progress-bar progress-bar-info" style="width: 75%;">
					                                        <span class="sr-only">75%</span>
					                                    </div>
					                                </div>
					                            </li>
					                        </ul>
					                    </div>
					                </div>
					            </div>
					
					
					        </div>
					        <!--===================================================-->
					        <!--End network line chart-->
					
					    </div>
					    <div class="col-lg-5">
					        <div class="row">
					            <div class="col-sm-6 col-lg-6">
					
					                <!--Sparkline Area Chart-->
					                <div class="panel panel-success panel-colorful">
					                    <div class="pad-all">
					                        <p class="text-lg text-semibold"><i class="demo-pli-data-storage icon-fw"></i> 硬盘容量</p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">132Gb</span>
					                            	可用
					                        </p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">1,45Gb</span>
					                            	已用
					                        </p>
					                    </div>
					                    <div class="pad-all text-center">
					                        <!--Placeholder-->
					                        <div id="demo-sparkline-area"></div>
					                    </div>
					                </div>
					            </div>
					            <div class="col-sm-6 col-lg-6">
					
					                <!--Sparkline Line Chart-->
					                <div class="panel panel-info panel-colorful">
					                    <div class="pad-all">
					                        <p class="text-lg text-semibold"><i class="demo-pli-wallet-2 icon-fw"></i> 警告</p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">$764</span>
					                            Today
					                        </p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">$1,332</span>
					                            Last 7 Day
					                        </p>
					                    </div>
					                    <div class="pad-all text-center">
					
					                        <!--Placeholder-->
					                        <div id="demo-sparkline-line"></div>
					
					                    </div>
					                </div>
					            </div>
					        </div>
					        <div class="row">
					            <div class="col-sm-6 col-lg-6">
					
					                <!--Sparkline bar chart -->
					                <div class="panel panel-purple panel-colorful">
					                    <div class="pad-all">
					                        <p class="text-lg text-semibold"><i class="demo-pli-bag-coins icon-fw"></i> 已售</p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">$764</span>
					                            	今天
					                        </p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">$1,332</span>
					                           	最近一周
					                        </p>
					                    </div>
					                    <div class="pad-all text-center">
					
					                        <!--Placeholder-->
					                        <div id="demo-sparkline-bar" class="box-inline"></div>
					
					                    </div>
					                </div>
					            </div>
					            <div class="col-sm-6 col-lg-6">
					
					                <!--Sparkline pie chart -->
					                <div class="panel panel-warning panel-colorful">
					                    <div class="pad-all">
					                        <p class="text-lg text-semibold"><i class="demo-pli-check icon-fw"></i> 任务进度</p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">34</span>
					                            	完成任务量
					                        </p>
					                        <p class="mar-no">
					                            <span class="pull-right text-bold">79</span>
					                            	总任务量
					                        </p>
					                    </div>
					                    <div class="pad-all">
					                        <ul class="list-group list-unstyled">
					                            <li class="mar-btm">
					                                <span class="label label-warning pull-right">15%</span>
					                                <p>进度</p>
					                                <div class="progress progress-md">
					                                    <div style="width: 15%;" class="progress-bar progress-bar-light">
					                                        <span class="sr-only">15%</span>
					                                    </div>
					                                </div>
					                            </li>
					                        </ul>
					                    </div>
					                </div>
					            </div>
					        </div>
					    </div>
					</div>
					
					<div class="row">
					    <div class="col-lg-4">
					        <!--List Todo-->
					        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
					        <div class="panel panel-trans">
					            <div class="panel-heading">
					                <h3 class="panel-title">待办列表</h3>
					            </div>
					            <div class="pad-ver">
					                <ul class="list-group bg-trans list-todo mar-no">
					                    <li class="list-group-item">
					                        <input id="demo-todolist-1" class="magic-checkbox" type="checkbox">
					                        <label for="demo-todolist-1"><span>这是一条新任务. <span class="label label-danger">非常着急</span></span></label>
					                    </li>
					                    <li class="list-group-item">
					                        <input id="demo-todolist-2" class="magic-checkbox" type="checkbox" checked>
					                        <label for="demo-todolist-2"><span>这是一条新任务</span></label>
					                    </li>
					                    <li class="list-group-item">
					                        <input id="demo-todolist-3" class="magic-checkbox" type="checkbox">
					                        <label for="demo-todolist-3"><span>这是一条新任务</span></label>
					                    </li>
					                    <li class="list-group-item">
					                        <input id="demo-todolist-4" class="magic-checkbox" type="checkbox">
					                        <label for="demo-todolist-4"><span>这是一条新任务 <span class="label label-warning">着急</span></span></label>
					                    </li>
					                    <li class="list-group-item">
					                        <input id="demo-todolist-5" class="magic-checkbox" type="checkbox" checked>
					                        <label for="demo-todolist-5"><span>这是一条新任务 <span class="label label-info">特殊</span></span></label>
					                    </li>
					                </ul>
					            </div>
					            <div class="input-group pad-all">
					                <input type="text" class="form-control" placeholder="New task" autocomplete="off">
					                <span class="input-group-btn">
					                    <button type="button" class="btn btn-success"><i class="demo-pli-add"></i></button>
					                </span>
					            </div>
					        </div>
					        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
					        <!--End todo list-->
					    </div>
					    <div class="col-lg-4">
					        <div class="panel panel-trans">
					            <div class="panel-heading">
					                <div class="panel-control">
					                    <a title="" data-html="true" data-container="body" data-original-title="&lt;p class='h4 text-semibold'&gt;Information&lt;/p&gt;&lt;p style='width:150px'&gt;This is an information bubble to help the user.&lt;/p&gt;" href="#" class="demo-psi-information icon-lg icon-fw unselectable text-info add-tooltip"></a>
					                </div>
					                <h3 class="panel-title">功能</h3>
					            </div>
					            <div class="bord-btm">
					                <ul class="list-group bg-trans">
					                    <li class="list-group-item">
					                        <div class="pull-right">
					                            <input id="demo-online-status-checkbox" class="toggle-switch" type="checkbox" checked>
					                            <label for="demo-online-status-checkbox"></label>
					                        </div>
					                        	开启在线状态
					                    </li>
					                    <li class="list-group-item">
					                        <div class="pull-right">
					                            <input id="demo-show-off-contact-checkbox" class="toggle-switch" type="checkbox" checked>
					                            <label for="demo-show-off-contact-checkbox"></label>
					                        </div>
					                        	显示离线联系人
					                    </li>
					                    <li class="list-group-item">
					                        <div class="pull-right">
					                            <input id="demo-show-device-checkbox" class="toggle-switch" type="checkbox">
					                            <label for="demo-show-device-checkbox"></label>
					                        </div>
					                        	显示我的头像
					                    </li>
					                </ul>
					            </div>
					            <div class="panel-body">
					                <div class="pad-btm">
					                    <p class="text-semibold text-main">需要我办理的任务</p>
					                    <div class="progress progress-sm">
					                        <div class="progress-bar progress-bar-purple" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%;" role="progressbar">
					                            <span class="sr-only">15%</span>
					                        </div>
					                    </div>
					                    <small>15% 完成</small>
					                </div>
					                <div class="pad-btm">
					                    <p class="text-semibold text-main">我发起的任务</p>
					                    <div class="progress progress-sm">
					                        <div class="progress-bar progress-bar-success" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;" role="progressbar">
					                            <span class="sr-only">70%</span>
					                        </div>
					                    </div>
					                    <small>70% 使用</small>
					                </div>
					            </div>
					        </div>
					    </div>
					    <div class='col-lg-4'>
					        <div class="panel panel-trans">
					            <div class="pad-all">
					                <div class="media mar-btm">
					                    <div class="media-left">
					                        <img src="#(ctx)/common/img//profile-photos/2.png" class="img-md img-circle" alt="Avatar">
					                    </div>
					                    <div class="media-body">
					                        <p class="text-lg text-main text-semibold mar-no">#(userName)</p>
					                        <p>管理员</p>
					                    </div>
					                </div>
					                <blockquote class="bq-sm bq-open bq-close">这里是我的个性签名 , 我很懒 ,啥都没写.</blockquote>
					            </div>
					
					            <!-- <div class="bord-top">
					                <ul class="list-group bg-trans bord-no">
					                    <li class="list-group-item list-item-sm">
					                        <div class="media-left">
					                            <i class="demo-psi-facebook icon-lg"></i>
					                        </div>
					                        <div class="media-body">
					                            <a href="#" class="btn-link text-semibold">Facebook</a>
					                        </div>
					                    </li>
					                    <li class="list-group-item list-item-sm">
					                        <div class="media-left">
					                            <i class="demo-psi-twitter icon-lg"></i>
					                        </div>
					                        <div class="media-body">
					                            <a href="#" class="btn-link text-semibold">@朋友</a>
					                            <br>
					                            	来了一个人
					                        </div>
					                    </li>
					                    <li class="list-group-item list-item-sm">
					                        <div class="media-left">
					                            <i class="demo-psi-instagram icon-lg"></i>
					                        </div>
					                        <div class="media-body">
					                            <a href="#" class="btn-link text-semibold">Ralphz</a>
					                        </div>
					                    </li>
					                    <li class="list-group-item list-item-sm">
					                        <div class="media-body">
					
					                        </div>
					                    </li>
					                </ul>
					            </div> -->
					        </div>
					    </div>
					</div>
					
					<div class="row">
					    <div class="col-xs-12">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">报表</h3>
					            </div>
					
					            <!--Data Table-->
					            <!--===================================================-->
					            <div class="panel-body">
					                <div class="pad-btm form-inline">
					                    <div class="row">
					                        <div class="col-sm-6 table-toolbar-left">
					                            <button class="btn btn-purple"><i class="demo-pli-add icon-fw"></i>新增</button>
					                            <button class="btn btn-default"><i class="demo-pli-printer"></i></button>
					                            <div class="btn-group">
					                                <button class="btn btn-default"><i class="demo-pli-information"></i></button>
					                                <button class="btn btn-default"><i class="demo-pli-recycling"></i></button>
					                            </div>
					                        </div>
					                        <div class="col-sm-6 table-toolbar-right">
					                            <div class="form-group">
					                                <input type="text" autocomplete="off" class="form-control" placeholder="搜索.." id="demo-input-search2">
					                            </div>
					                            <div class="btn-group">
					                                <button class="btn btn-default"><i class="demo-pli-download-from-cloud"></i></button>
					                                <div class="btn-group">
					                                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					                                        <i class="demo-pli-gear"></i>
					                                        <span class="caret"></span>
					                                    </button>
					                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
					                                        <li><a href="#">Action</a></li>
					                                        <li><a href="#">Another action</a></li>
					                                        <li><a href="#">Something else here</a></li>
					                                        <li class="divider"></li>
					                                        <li><a href="#">Separated link</a></li>
					                                    </ul>
					                                </div>
					                            </div>
					                        </div>
					                    </div>
					                </div>
					                <div class="table-responsive">
					                    <table class="table table-striped">
					                        <thead>
					                            <tr>
					                                <th>Invoice</th>
					                                <th>User</th>
					                                <th>Order date</th>
					                                <th>Amount</th>
					                                <th class="text-center">Status</th>
					                                <th class="text-center">Tracking Number</th>
					                            </tr>
					                        </thead>
					                        <tbody>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53431</a></td>
					                                <td>Steve N. Horton</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 22, 2014</span></td>
					                                <td>$45.00</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-success">Paid</div>
					                                </td>
					                                <td class="text-center">-</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53432</a></td>
					                                <td>Charles S Boyle</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 24, 2014</span></td>
					                                <td>$245.30</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-info">Shipped</div>
					                                </td>
					                                <td class="text-center"><i class="fa fa-plane"></i> CGX0089734531</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53433</a></td>
					                                <td>Lucy Doe</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 24, 2014</span></td>
					                                <td>$38.00</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-info">Shipped</div>
					                                </td>
					                                <td class="text-center"><i class="fa fa-plane"></i> CGX0089934571</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53434</a></td>
					                                <td>Teresa L. Doe</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 15, 2014</span></td>
					                                <td>$77.99</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-info">Shipped</div>
					                                </td>
					                                <td class="text-center"><i class="fa fa-plane"></i> CGX0089734574</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link"> Order #53435</a></td>
					                                <td>Teresa L. Doe</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 12, 2014</span></td>
					                                <td>$18.00</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-success">Paid</div>
					                                </td>
					                                <td class="text-center">-</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link">Order #53437</a></td>
					                                <td>Charles S Boyle</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 17, 2014</span></td>
					                                <td>$658.00</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-danger">Refunded</div>
					                                </td>
					                                <td class="text-center">-</td>
					                            </tr>
					                            <tr>
					                                <td><a href="#" class="btn-link">Order #536584</a></td>
					                                <td>Scott S. Calabrese</td>
					                                <td><span class="text-muted"><i class="fa fa-clock-o"></i> Oct 19, 2014</span></td>
					                                <td>$45.58</td>
					                                <td class="text-center">
					                                    <div class="label label-table label-warning">Unpaid</div>
					                                </td>
					                                <td class="text-center">-</td>
					                            </tr>
					                        </tbody>
					                    </table>
					                </div>
					                <hr>
					                <div class="pull-right">
					                    <ul class="pagination text-nowrap mar-no">
					                        <li class="page-pre disabled">
					                            <a href="#">&lt;</a>
					                        </li>
					                        <li class="page-number active">
					                            <span>1</span>
					                        </li>
					                        <li class="page-number">
					                            <a href="#">2</a>
					                        </li>
					                        <li class="page-number">
					                            <a href="#">3</a>
					                        </li>
					                        <li>
					                            <span>...</span>
					                        </li>
					                        <li class="page-number">
					                            <a href="#">9</a>
					                        </li>
					                        <li class="page-next">
					                            <a href="#">&gt;</a>
					                        </li>
					                    </ul>
					                </div>
					            </div>
					            <!--===================================================-->
					            <!--End Data Table-->
					
					        </div>
					    </div>
					</div>
					
					
					
                </div>
                <!--===================================================-->
                <!--End page content-->


